import React from "react";
import { useShallow } from "zustand/react/shallow";
import { useStore } from "../stores/store";
import { useCombineStore } from "../stores/combineStore";
import { useBoundStore } from "../stores/useBoundStore";

export const CombineStoreBox = () => {
  const bears = useBoundStore((state) => state.bears)
  const fishes = useBoundStore((state) => state.fishes)
  const addBear = useBoundStore((state) => state.addBear)
  const addFish = useBoundStore((state) => state.addFish)
  const eatFish = useBoundStore((state) => state.eatFish)
  const { user, theme, login, toggleTheme } = useCombineStore();
  const { count, increment, decrement } = useStore(
    useShallow((state) => ({
      count: state.count,
      increment: state.increment,
      decrement: state.decrement,
    }))
  );
  return (
    <div className="box">
      <h1>Combine Store</h1>
      <p>count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <p>
        user: {user?.name}, theme: {theme}
      </p>
      <button onClick={() => login("Jack")}>Jack Login</button>
      <button onClick={toggleTheme}>切换 theme</button>
      <p>Number of bears: {bears}</p>
      <p>Number of fishes: {fishes}</p>
      <button onClick={() => addBear()}>Add a bear</button>
      <button onClick={() => addFish()}>Add a fish</button>
      <button onClick={() => eatFish()}>Eat a fish</button>
    </div>
  );
};
